<template>
  <div class="toast">
    <i :class="getClass"></i>
    <span>{{toastMsg}}</span>
  </div>
</template>
 
<script>
/*
 1. 创建了Toast组件（基本样式）
   2. 在App.vue中引入组件并使用。
   3. 将是否显示，提示内容，类型等数据存储到vux中。
   4. 在Toast组件中使用state中的数据--检查
   5. 在Login.vue中调用vuex中方法修改提示内容，提示类型，以及显示。
   6. 自动隐藏提示框内容- 调用vuex中方法，将是否显示设置为false
   7. 增加过渡效果
   8. 在vuex中自动关闭提示框（actions) 
 */
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      toastMsg: (state) => state.showToast.toastMsg,
      toastType: (state) => state.showToast.toastType,
    }),
    getClass(){
      //根据类型计算出样式名
      if(this.toastType=="success"){
        return "iconfont icon-toast_chenggong"
      }else if(this.toastType=="danger"){
        return "iconfont icon-toast-shibai_huaban"
      }else{
        return "iconfont icon-toast-jinggao"
      }
    }
  },
};
</script>


<style lang = "less" scoped>
.toast {
  position: fixed;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 10px;

  .iconfont {
    margin-right: 10px;
  }

  .icon-toast-shibai_huaban {
    color: red;
  }

  .icon-toast_chenggong {
    color: green;
  }

  .icon-toast-jinggao {
    color: orange;
  }
}
</style>